/*
 * @Author: 自迩
 * @Date: 2022-03-22 17:04:16
 * @LastEditTime: 2022-03-22 21:33:18
 * @LastEditors: your name
 * @Description:
 * @FilePath: \class-ending-homework\src\components\Middle2\index.jsx
 */
import React, {useState, useMemo} from 'react'
import './index.css'
import ClassItem from '../ClassItem'
//课程列表
let classList = [
    {
        className: "HTML大法",
        classContent: "这里是课程内容概要，这里是课程内容概要，这里是课程内容概要，这里是课程内容概要，这里是课程内容概要，这里是课程内容概要，这里是课程内容概要，这里是课程内容概要。",
        type: ["HTML"]
    },
    {
        className: "CSS大法",
        classContent: "这里是课程内容概要，这里是课程内容概要，这里是课程内容概要，这里是课程内容概要，这里是课程内容概要，这里是课程内容概要，这里是课程内容概要，这里是课程内容概要。",
        type: ["CSS"]
    },
    {
        className: "JavaScript大法",
        classContent: "这里是课程内容概要，这里是课程内容概要，这里是课程内容概要，这里是课程内容概要，这里是课程内容概要，这里是课程内容概要，这里是课程内容概要，这里是课程内容概要。",
        type: ["JavaScript"]
    },
    {
        className: "Vue大法",
        classContent: "这里是课程内容概要，这里是课程内容概要，这里是课程内容概要，这里是课程内容概要，这里是课程内容概要，这里是课程内容概要，这里是课程内容概要，这里是课程内容概要。",
        type: ["HTML", "CSS", "JavaScript"]
    },
    {
        className: "React大法",
        classContent: "这里是课程内容概要，这里是课程内容概要，这里是课程内容概要，这里是课程内容概要，这里是课程内容概要，这里是课程内容概要，这里是课程内容概要，这里是课程内容概要。",
        type: ["HTML", "CSS", "JavaScript"]
    },
    {
        className: "三件套大法",
        classContent: "这里是课程内容概要，这里是课程内容概要，这里是课程内容概要，这里是课程内容概要，这里是课程内容概要，这里是课程内容概要，这里是课程内容概要，这里是课程内容概要。",
        type: ["HTML", "CSS", "JavaScript"]
    }
]

export default function Middle2() {
    let [classType,setClassType] = useState("all")
    let [btnStyle,setBtnStyle] = useState({all:"current-type",HTML:'',CSS:'',JavaScript:''})

    let classDisplayList = useMemo(()=>{
        if(classType === 'all')
            return classList
        else{
            return classList.filter(({type})=>{
                if(type instanceof Array)
                    if(type.indexOf(classType) !== -1)
                        return true
                else
                    if(type === classType)
                        return true
            })
        }

    },[classType])

    const classTypeChange = e =>{
        const {textContent} = e.target
        btnStyle[classType] = ''
        if(textContent === "全部"){
            setClassType("all")
            btnStyle.all = "current-type"
            setBtnStyle({...btnStyle})
        }
        else{
            setClassType(textContent)
            btnStyle[textContent] = "current-type"
            setBtnStyle({...btnStyle})
        }
    }

  return (
    <div className='middle2'>
        <h1 id="middle2-title">课程安排</h1>
        <div id="classify-container">
            <div className="classify-box" onClick={classTypeChange}>
                <span className={btnStyle.all} id="classify-all">全部</span>
                <span className={btnStyle.HTML} id="classify-HTML">HTML</span>
                <span className={btnStyle.CSS} id="classify-CSS">CSS</span>
                <span className={btnStyle.JavaScript} id="classify-JavaScript">JavaScript</span>
            </div>
        </div>
        <div id="class-box">
        {
            classDisplayList.map( classObj => <ClassItem  key={classObj.className} classObj={classObj}/> )
        }
        </div>
    </div>
  )
}
